<template>
  <div>
    <div class="projection">大   屏</div>
    <div class="seat-box" v-if="seatData.length > 0">
      <div class="seat-left">
        <div class="seat-item" v-for="(item, index) in seatData.slice(0, (seatData.length - 2) / 2)" :key="index">
          <div class="seat-xh">{{item.xh === 0 ? 1 : item.xh }}</div>
          <!-- <el-input class="seat-name seat-xh" @change="onChange" v-model="item.xh" placeholder="输入序号"></el-input> -->
          <el-input
            class="seat-name"
            @change="onChange"
            v-model="item.name" placeholder="">
          </el-input>
        </div>
      </div>
      <div class="seat-min" style="height: 720px;"></div>
      <div class="seat-right">
        <div class="seat-item" v-for="(item, index) in seatData.slice((seatData.length - 2) / 2, seatData.length - 2)" :key="index">
          <div class="seat-xh">{{item.xh === 9 ? 10 : item.xh}}</div>
          <!-- <el-input class="seat-name seat-xh" @change="onChange" v-model="item.xh" placeholder="输入序号"></el-input> -->
          <el-input
            class="seat-name"
            @change="onChange"
            v-model="item.name" placeholder="">
          </el-input>
        </div>
      </div>
    </div>
    <div class="seat-bottom" v-if="seatData.length > 0">
      <div class="seat-item" v-for="(item, index) in seatData.slice(seatData.length - 2, seatData.length)" :key="index">
        <div class="seat-xh">{{item.xh}}</div>
        <!-- <el-input class="seat-name seat-xh" @change="onChange" v-model="item.xh" placeholder="输入序号"></el-input> -->
        <el-input
          class="seat-name"
          @change="onChange"
          v-model="item.name" placeholder="">
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 会议室容纳人数
    rnrs: {
      type: Number
    },
    value: {
      type: String
    }
  },
  data () {
    return {
      seatData: [],
      allData: {}
    }
  },
  watch: {
    value: {
      handler(newVal)
      {
        console.log(newVal, 'newVal')
        if (newVal)
        {
          var value = JSON.parse(newVal)
          this.allData = value
          this.seatData = value.nameData
          console.log(this.seatData, 'seatData')
        }
        else
        {
          this.seatData = []
        }
      },
      immediate: true,
    },
    // seatData: {
    //   handler(newVal)
    //   {
    //     console.log(newVal, '123')
    //     this.$emit("input", newVal);
    //     this.$emit("setPlan", newVal)
    //   }
    // },
    rnrs: {
      handler(newVal)
      {
        console.log(newVal, 'rnrs')
        if (newVal)
        {
          var arr = []
          var arrL = []
          var arrR = []
          var arr1 = []
          var arr2 = []
          var arr3 = []
          var arr4 = []
          for (let i = 0; i < newVal; i++)
          {
            // arr.push({xh: '', name: ''})
            if (i < 9)
            {
              if (i %2 === 0)
              {
                arr1.push({xh: 9 - (i + 1), name: ''})
              }
              else
              {
                arr2.push({xh: i + 2, name: ''})
              }
              arrL = [...arr1, ...arr2]
            }
            else if (i >= 9 && i < 18)
            {
              if (i %2 === 0)
              {
                arr3.unshift({xh: i + 2, name: ''})
              }
              else
              {
                arr4.push({xh: i, name: ''})
              }
              arrR = [...arr3, ...arr4]
            }
            else
            {
              arr.push({xh: i + 1, name: ''})
            }
          }
          arr = [...arrL, ...arrR, ...arr]
          console.log(arr, 'arr')
          this.seatData = arr
        }
      }
    }
  },
  methods: {
    onChange(P_value)
    {
      this.seatData = this.seatData
      console.log(this.seatData, 'valueData')
      this.allData.nameData = this.seatData
      this.$emit("setPlan", this.allData)
    }
  }
}
</script>

<style scoped>
.projection {
  width: 35%;
  height: 30px;
  border: 1px solid #A5A5A5;
  margin: 0 auto 30px;
  text-align: center;
  line-height: 30px;
}
.seat-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 720px;
}
.seat-left, .seat-right {
  height: 100%;
  flex: 1;
}
.seat-left, .seat-left .seat-name, .seat-left .seat-xh {
  transform: rotateY(180deg);
}
.seat-left, .seat-item, .seat-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
.seat-item {
  margin-bottom: 20px;
}
.seat-item .seat-xh {
  border: 1px solid #ddd;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
}
.seat-item .seat-name, .seat-name ::v-deep .el-input__inner {
  width: 100px;
  height: 30px;
  line-height: 30px;
}
.seat-item .seat-xh ::v-deep .el-input__inner {
  text-align: center;
}

.seat-min {
  width: 300px;
  min-height: 400px;
  border: 1px solid #1890FF;
  border-radius: 20px;
  margin: 0 20px;
}
.seat-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.seat-bottom .seat-item:first-child {
  margin-right: 50px;
}
</style>